Frontend-разработчик: сайты на HTML/CSS/JavaScript от Coddy
Вы научитесь
Программа курса
Программа содержит 9 модулей, по 4 урока в каждом. При проведении занятий учитывается специфика обучения детей 11-14 лет для наилучшего усвоения материала. Представлены варианты дистанционного или офлайн-формата, в группе или с персональными уроками. За время прохождения программы студенты выполнят 3 учебных проекта и один собственный под руководством преподавателя. Успешное обучение вознаграждается сертификатом от школы, а мотивационная система с призами сохраняет тягу к получению знаний.
1-й модуль
Изучите составляющие HTML-страницы и освоите её вёрстку с помощью тегов. Освоите применение текстового редактора для упрощения процесса вёрстки. Узнаете, какие характеристики есть у тегов и для чего они нужны. Поймёте, как сделать сайт с разными разделами на отдельных страницах, размещать на нём изображения и ссылки. Разберётесь в CSS-стилях и возможностях преобразования HTML-составляющих с их помощью. Познакомитесь с плагинами для текстовых редакторов. Отработаете на практике создание многостраничника и научитесь ориентироваться в древовидной структуре с директориями и файлами.
Изучите составляющие HTML-страницы и освоите её вёрстку с помощью тегов. Освоите применение текстового редактора для упрощения процесса вёрстки.
Узнаете, какие характеристики есть у тегов и для чего они нужны. Поймёте, как сделать сайт с разными разделами на отдельных страницах, размещать на нём изображения и ссылки.
Разберётесь в CSS-стилях и возможностях преобразования HTML-составляющих с их помощью. Познакомитесь с плагинами для текстовых редакторов.
Отработаете на практике создание многостраничника и научитесь ориентироваться в древовидной структуре с директориями и файлами.
2-й модуль
Разберётесь, что из себя представляют блоки и как реализовать их на практике. Узнаете, как преобразовать за счёт шрифтов и стилей отображение символов для статей и информационных фрагментов. Познакомитесь со свойствами для размещения текста и графического контента относительно друг друга. Сделаете веб-страницу с семантическими элементами и блоками для информационного сайта.
Разберётесь, что из себя представляют блоки и как реализовать их на практике.
Узнаете, как преобразовать за счёт шрифтов и стилей отображение символов для статей и информационных фрагментов.
Познакомитесь со свойствами для размещения текста и графического контента относительно друг друга.
Сделаете веб-страницу с семантическими элементами и блоками для информационного сайта.
3-й модуль
Изучите, как размещать картинки для заднего плана. Узнаете, как пользоваться ключевыми словами для селекторов. Научитесь делать визуальные эффекты, активирующиеся при наведении курсора. Поймёте, как создавать гибкие макеты для веб-страниц для соблюдения адаптивности. Потренируетесь использовать новые знания в обучающей игре по FlexBox. Начнёте создавать многостраничный сайт для интернет-магазина. Доработаете свой сайт с галереей и товарными карточками.
Изучите, как размещать картинки для заднего плана. Узнаете, как пользоваться ключевыми словами для селекторов. Научитесь делать визуальные эффекты, активирующиеся при наведении курсора.
Поймёте, как создавать гибкие макеты для веб-страниц для соблюдения адаптивности. Потренируетесь использовать новые знания в обучающей игре по FlexBox.
Начнёте создавать многостраничный сайт для интернет-магазина.
Доработаете свой сайт с галереей и товарными карточками.
4-й модуль
Узнаете, что такое сетка и как ей пользоваться. Потренируетесь применять Grid за счёт учебной игры. Разберётесь, как можно добавлять стили до или после определённого элемента, а также привязывать их к первому символу или строке в тексте. Поймёте, как накладывать текст поверх изображений, верстать интересные блоки. Научитесь изменять масштаб, положение элемента относительно других объектов и делать анимацию на сайте. Отточите полученные навыки приведения в движение объектов на веб-страницах на примере темы космоса.
Узнаете, что такое сетка и как ей пользоваться. Потренируетесь применять Grid за счёт учебной игры.
Разберётесь, как можно добавлять стили до или после определённого элемента, а также привязывать их к первому символу или строке в тексте. Поймёте, как накладывать текст поверх изображений, верстать интересные блоки.
Научитесь изменять масштаб, положение элемента относительно других объектов и делать анимацию на сайте.
Отточите полученные навыки приведения в движение объектов на веб-страницах на примере темы космоса.
5-й модуль
Узнаете, в чём специфика создания сайта для продажи товаров. Разберётесь в пользовательских CSS-свойствах. Научитесь добавлять шрифты и JS-скрипты, оформлять меню и шапку сайта. Освоите разработку блока, который первым попадается на глаза пользователю при посещении сайта интернет-магазина. Узнаете, как продемонстрировать потенциальному покупателю наиболее востребованные товары и вызвать доверие за счёт информации о компании.
Узнаете, в чём специфика создания сайта для продажи товаров.
Разберётесь в пользовательских CSS-свойствах. Научитесь добавлять шрифты и JS-скрипты, оформлять меню и шапку сайта.
Освоите разработку блока, который первым попадается на глаза пользователю при посещении сайта интернет-магазина.
Узнаете, как продемонстрировать потенциальному покупателю наиболее востребованные товары и вызвать доверие за счёт информации о компании.
6-й модуль
Поймёте, как сделать динамический блок с отображением отзывов потребителей товаров. Узнаете, как можно добавлять видео на сайт, корректировать его воспроизведение и делать форму обратной связи. Изучите особенности реализации галереи с изображениями и нестандартного фона. Разберётесь, как подстраивать отображение картинок, видео, текста и блоков на сайте под разные устройства.
Поймёте, как сделать динамический блок с отображением отзывов потребителей товаров.
Узнаете, как можно добавлять видео на сайт, корректировать его воспроизведение и делать форму обратной связи.
Изучите особенности реализации галереи с изображениями и нестандартного фона.
Разберётесь, как подстраивать отображение картинок, видео, текста и блоков на сайте под разные устройства.
7-й модуль
Рассмотрите, как облегчает работу со стилями библиотека Tailwind CSS. Узнаете, как сделать отступы, тени, эффекты, кнопки и адаптивный дизайн за счёт фреймворка. Разберётесь в деталях создания товарных карточек с различными полями и элементами при помощи Tailwind и Flex-контейнера. Поймёте, как работать с сеткой и сделать страницу о коллективе сотрудников.
Рассмотрите, как облегчает работу со стилями библиотека Tailwind CSS.
Узнаете, как сделать отступы, тени, эффекты, кнопки и адаптивный дизайн за счёт фреймворка.
Разберётесь в деталях создания товарных карточек с различными полями и элементами при помощи Tailwind и Flex-контейнера.
Поймёте, как работать с сеткой и сделать страницу о коллективе сотрудников.
8-й модуль
Узнаете, как сделать первый экран сайта для приложения с компактным гамбургер-меню. Продолжите заниматься наполнением сайта информацией о приложении и его реализации. Выполните задачу по составлению блоков и слайдеров о сотрудниках. Потренируетесь работать над футером и блоком со стоимостью.
Узнаете, как сделать первый экран сайта для приложения с компактным гамбургер-меню.
Продолжите заниматься наполнением сайта информацией о приложении и его реализации.
Выполните задачу по составлению блоков и слайдеров о сотрудниках.
Потренируетесь работать над футером и блоком со стоимостью.
9-й модуль
Определите для себя нишу, для которой займётесь созданием сайта. Сделаете веб-страницы с контентом и скорректируете недочёты. Доделаете сайт и опубликуете его для публичного доступа. Начнёте работу над презентацией для освещения своего проекта. Расскажете подробнее о своём проекте и представите свою проделанную работу на суд преподавателей.
Определите для себя нишу, для которой займётесь созданием сайта.
Сделаете веб-страницы с контентом и скорректируете недочёты.
Доделаете сайт и опубликуете его для публичного доступа. Начнёте работу над презентацией для освещения своего проекта.
Расскажете подробнее о своём проекте и представите свою проделанную работу на суд преподавателей.
